<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <title>购物车</title>
</head>
<body>
    <div id="app">
      <div class="container">
        <div class="row">
          <table class="table table-bordered table-hover">
            <caption class="h1 text-danger text-center" style="caption-side:top">购物车</caption>
            <tr>
              <th>全选<input type="checkbox" v-model="isAll" name="" id=""></th>
              <th>商品</th>
              <th>单价</th>
              <th>数量</th>
              <th>小计</th>
              <th>操作</th>
            </tr>
            <tr v-for="(item, index) in products">
              <td><input type="checkbox" v-model="item.isSelected"></td>
              <td>
                <img :src="item.productCover" width="80"/>
                <span>{{item.productName}}</span>
              </td>
              <td>¥{{item.productPrice}}</td>
              <td>
                <input type="number" @change="parseNum(index)" v-model="item.productCount">
              </td>
              <td>¥{{(item.productPrice * item.productCount) | toFixed}}</td>
              <td><button @click="remove(index)" class="btn btn-danger">删除</button></td>
            </tr>
            <tr>
              <td colspan="6">总价格：¥{{sum}}</td>
            </tr>
          </table>
        </div>
        <div class="row">
          <input type="text" name="" id="" v-model="message">
          <p>{{reversedMessage}}</p>
          <!-- <p>{{now}}</p> -->
        </div>
        <!-- <p>{{o}}</p> -->
        <form class="form-horizontal">
          <div class="form-group">
            <lable class="col-sm-2 control-label">商品名称</lable>
            <div class="col-sm-10">
              <input type="text" class="form-control">
            </div>

          </div>
        </form>
      </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <script>
      /*

        xianzai he tongku xiangyao taolitongku 
        weishenme hui tongku yinwei ni xianzai de xingge xianzaide xingwei
        yonggan yidian miandui meiyige tiaozhan 

        zhiqian bugan gandeshi xianzai yonggan quzuo gaibian taren yanzhong 
        nide guyou yinxiang zhineng tonguo gaibian yuyan he xingwei

        zhiqian bugan buhaoyisi shuodehua, congjintian kaishi yonggan shuo
        zhiqian bugan buhaoyisi zuodeshi, congjintian kaishi bixu zuo

        bie zaiyi bieren de kanfa

        youmo wo mingtian fangle haojitianl wohainamen sheifangdaowo zhede
        wozhidao shini nalai de wo zaojiu chile, wohai namen zen

        nimennalingshi haishoufei zhelingshi suibianna ni bawozhu zhege jihui
        wojintiandianwaimaile nimen quchiba wojintian
        
        douzaidie zhurou tiaozheng taizaiyibierendekanfa
        qianxu pingyijinren biezheyang preventDefault
        taizaiyi bieren de kanfa duiziji meiyouxinxi 
        meigeren doushi pinchengren douyou yige pingchangxin
        pingchangren douhui you xinuaile butong deqingxu 
        pingchangren douhui jinzhang meigeren doushi zheyang
        pingchangren shangtai yanjiangdouhui gandao jinzhang
        pingchangren zai dangzhong shuohua douhui jinzhang linajie yeshi
            youde pinchangren jinzhang biaoxiande bunamemingxian
            youde pinchangren hui biaoxian de yichang jinzhang beijinzhang
                  qingxusuo zhipei yizhiyu buneng zhengchangbiaoda
            jingli dangzhong shuohua hui jinzhang
            meijun dangzhong shuohua hui jinzhang
            linajie dangzhong shuohua hui jinzhang 
                  buhui tai zaiyi jinzhang de qingxu, ba zhongdian fangdao tanhua neirong
                  buhui tai zaiyi jinzhang de qingxu, shiqian zuohao chongfen de zhunbei

            yuliang dangzhong shuohua hui jinzhang
            xiaoqing dangzhong shuohua hui jinzhang 
                  xiaoqing shi lingyige ziji
                  guodu guazhu ziji de jinzhang qingxu erbushi guanzhu tahuaneirong
                  guodu guazhu ziji de jinzhang qingxu, dui tanhua neirong meiyou zhunbeihao
           

      */
      let vm = new Vue({
        el:'#app',
        data: {
          // isAll:false,
          products:[],
          obj: {a:5},
          n: 10,
          m: 20,
          message: 'abc'
        },
        created(){
          // 生命周期函数 this当前实例
          // 只要数据初始化完成就会触发 一般都是请求数据的时候，在这里请求
          this.getData()
        },
        computed: {
          // 必须要有get可以没有set
          // v-model绑定的属性有get和set
          isAll:{
            get(){
              return this.products.every(item => item.isSelected)
            },
            set(val){
              this.products.forEach(item => {
                item.isSelected = val
              })
            }
          },
          sum:{
            get(){
              let total = null
              this.products.forEach(item => {
                total += item.isSelected ? item.productPrice * item.productCount : 0
              })
              return Number(total).toFixed(2)
            }
          },
          reversedMessage:{
            get(){
              return this.message.split('').reverse().join("")
            }
          },
          isCompute:{
            get(){
              // 只要获取这个属性，就会触发get函数
              console.log(1111)
              return 11
            },
            set(val){
              // val 设置的值 为什么你想要一步登天呢 
              // 世界是公平的，你不努力，不磨炼怎么可能成功呢
              // 两个独立的人，找到完整的自己，人生来就是孤独的，自然给我们痛苦，让我们成长
              
            }
          }
        },
        methods:{
          remove2(item){
            this.carList = this.carList.filter(val => val != item)
          },
          async getData(){
            this.products = (await axios.get("data/carts.json")).data
            // axios.get("data/carts.json").then(res => {
            //   this.products = res.data
            // })
          },
          // getAll(){
          //   this.products.forEach(item => {
          //     item.isSelected = this.isAll
          //   })
          // },
          // check(){
          //   this.isAll = this.products.every(item => item.isSelected)
          // },
          remove(index){
            this.products.splice(index, 1);
          },
          // sum(){
          //   let total = 0
          //   this.products.forEach(item => {
          //     total += item.isSelected ? item.productPrice * item.productCount : 0
          //   })
          //   return total
          // },
          parseNum(index){
            this.products[index].productCount = this.products[index].productCount >= 0 ? this.products[index].productCount : 0
          }
        },
        // 对一些格式的要求，加符号，补0，
        filters: {
          toFixed(target){
            return target.toFixed(2)
          },
          add$(target){
            let reg = /^(\$|¥)/
            return reg.test(target.toString()) ? target : "$" + target
          }
        }
      })

      /*

        喜欢学习———每天都在自学，技术不断提升
        专业技术好———帮其他人解决技术问题
        善良，绅士———为女生着想，尊重他人
        谦虚———做事低调
        考虑周密———事前会做详细计划
        平易近人———和任何人都能相处
        乐于助人———帮助同事解决问题
        幽默感———逗大家开心
        有上进心———不安于现状
        细心———对一些细节能够想到
        有责任心———认真负责完毕工作

        最近要增加的优点
        保持下班心情愉悦---不要想太多
        有说不完的话---兴趣，轻松
        主动和别人打招呼说话，主动点


      */
    </script>
</body>
</html>